<!--
 * @Author: your name
 * @Date: 2020-11-03 10:14:50
 * @LastEditTime: 2020-11-12 09:16:52
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \sende_nuxt\components\purchaseLens\prescriptionOption.vue
-->
<template>
  <div class="prescriptionOption">
    <ul class="prescriptionOption_ul">
      <li class="prescriptionOption_li" @click="isSwitch = '1'" :class="{active:isSwitch === '1'}">Fill it out online</li>
      <li class="prescriptionOption_li" @click="isSwitch = '0'" :class="{active:isSwitch === '0'}">Upload your prescription picture</li>
    </ul>
    <div class="online" v-if="isSwitch === '1'">
      <div class="prescriptionOption_ODOS ptb30">
      <table class="ODOSTable">
        <thead>
          <tr>
            <th class="ODOSTable_th"></th>
            <th class="ODOSTable_th">Sphere (SPH)</th>
            <th class="ODOSTable_th">Cylinder(CYL)</th>
            <th class="ODOSTable_th">Axis</th>
            <th class="ODOSTable_th"><span v-show="typeIndex === 2">NV - ADD</span></th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td class="pr40 title">OD-Right</td>
            <td class="pr40">
              <div class="select">
                <select
                  name=""
                  id=""
                  v-model="odosConfig.sphereRight"
                  class="ODOSTable_select pr30 pl10"
                >
                  <option class="option" value="0.00">0.00</option>
                  <option class="option" value="1.00">1.00</option>
                  <option class="option" value="2.00">2.00</option>
                  <option class="option" value="3.00">3.00</option>
                </select>
              </div>
            </td>
            <td class="pr40">
              <div class="select">
                <select
                  name=""
                  id=""
                  v-model="odosConfig.cylinderRight"
                  class="ODOSTable_select pr30 pl10"
                >
                  <option class="option" value="0.00">0.00</option>
                  <option class="option" value="1.00">1.00</option>
                  <option class="option" value="2.00">2.00</option>
                  <option class="option" value="3.00">3.00</option>
                </select>
              </div>
            </td>
            <td class="pr40">
              <div class="select">
                <select
                  name=""
                  id=""
                  v-model="odosConfig.axisRight"
                  class="ODOSTable_select pr30 pl10"
                  :disabled="odosConfig.cylinderRight === '0.00'"
                >
                  <option class="option" value="0.00">0.00</option>
                  <option class="option" value="1.00">1.00</option>
                  <option class="option" value="2.00">2.00</option>
                  <option class="option" value="3.00">3.00</option>
                </select>
              </div>
            </td>
            <td>
              <div class="select" v-show="typeIndex === 2">
                <select
                  name=""
                  id=""
                  v-model="odosConfig.nvAddRight"
                  class="ODOSTable_select pr30 pl10"
                >
                  <option class="option" value="">None</option>
                  <option class="option" value="0.00">0.00</option>
                  <option class="option" value="1.00">1.00</option>
                  <option class="option" value="2.00">2.00</option>
                  <option class="option" value="3.00">3.00</option>
                </select>
              </div>
            </td>
          </tr>
          <tr>
            <td class="pr40 title">OS-Left</td>
            <td class="pr40">
              <div class="select">
                <select
                  name=""
                  id=""
                  v-model="odosConfig.sphereLeft"
                  class="ODOSTable_select pr30 pl10"
                >
                  <option class="option" value="0.00">0.00</option>
                  <option class="option" value="1.00">1.00</option>
                  <option class="option" value="2.00">2.00</option>
                  <option class="option" value="3.00">3.00</option>
                </select>
              </div>
            </td>
            <td class="pr40">
              <div class="select">
                <select
                  name=""
                  id=""
                  v-model="odosConfig.cylinderLeft"
                  class="ODOSTable_select pr30 pl10"
                >
                  <option class="option" value="0.00">0.00</option>
                  <option class="option" value="1.00">1.00</option>
                  <option class="option" value="2.00">2.00</option>
                  <option class="option" value="3.00">3.00</option>
                </select>
              </div>
            </td>
            <td class="pr40">
              <div class="select">
                <select
                  name=""
                  id=""
                  v-model="odosConfig.axisLeft"
                  class="ODOSTable_select pr30 pl10"
                  :disabled="odosConfig.cylinderLeft === '0.00'"
                >
                  <option class="option" value="0.00">0.00</option>
                  <option class="option" value="1.00">1.00</option>
                  <option class="option" value="2.00">2.00</option>
                  <option class="option" value="3.00">3.00</option>
                </select>
              </div>
            </td>
            <td>
              <div class="select" v-show="typeIndex === 2">
                <select
                  name=""
                  id=""
                  v-model="odosConfig.nvAddLeft"
                  class="ODOSTable_select pr30 pl10"
                >
                  <option class="option" value="">None</option>
                  <option class="option" value="0.00">0.00</option>
                  <option class="option" value="1.00">1.00</option>
                  <option class="option" value="2.00">2.00</option>
                  <option class="option" value="3.00">3.00</option>
                </select>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="prescriptionOption_PDP ptb30">
      <table class="ODOSTable">
        <tbody>
          <tr>
            <td rowspan="2" colspan="2" class="pr40 firstTitle">
              PD-Pupillary dsidtance
            </td>
            <td class="pr40">
              <label for="Single" class="label">
                <input
                  id="Single"
                  type="radio"
                  value="1"
                  v-model="pd"
                  class="label_pd"
                />
                <span class="txt">Single PD</span>
              </label>
            </td>
            <td class="pr40">
              <label for="Dual" class="label">
                <input
                  id="Dual"
                  type="radio"
                  value="0"
                  v-model="pd"
                  class="label_pd"
                />
                <span class="txt">Dual PD</span>
              </label>
            </td>
            <td></td>
          </tr>
          <tr>
            <td class="pr40">
              <div class="select">
                <select
                  name=""
                  id=""
                  v-model="pdOption.single"
                  class="ODOSTable_select pr30 pl10"
                  :disabled="pd === '0'"
                >
                  <option class="option" value="">None</option>
                  <option class="option" value="0.00">0.00</option>
                  <option class="option" value="1.00">1.00</option>
                  <option class="option" value="2.00">2.00</option>
                  <option class="option" value="3.00">3.00</option>
                </select>
              </div>
            </td>
            <td class="pr40">
              <div class="select">
                <select
                  name=""
                  id=""
                  v-model="pdOption.dualLeft"
                  class="ODOSTable_select pr30 pl10"
                  :disabled="pd === '1'"
                >
                  <option class="option" value="">Left</option>
                  <option class="option" value="0.00">0.00</option>
                  <option class="option" value="1.00">1.00</option>
                  <option class="option" value="2.00">2.00</option>
                  <option class="option" value="3.00">3.00</option>
                </select>
              </div>
            </td>
            <td>
              <div class="select">
                <select
                  name=""
                  id=""
                  v-model="pdOption.dualRight"
                  class="ODOSTable_select pr30 pl10"
                  :disabled="pd === '1'"
                >
                  <option class="option" value="">Right</option>
                  <option class="option" value="0.00">0.00</option>
                  <option class="option" value="1.00">1.00</option>
                  <option class="option" value="2.00">2.00</option>
                  <option class="option" value="3.00">3.00</option>
                </select>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="prescriptionOption_Pv ptb30">
      <div class="chooseTable">
        <h3 class="title mb10">Prism value</h3>
        <div class="choose_y_n">
          <label for="no" class="mr20"
            ><input
              type="radio"
              id="no"
              value="0"
              v-model="chooseVal"
              class="chooseRadio"
              :disabled="typeIndex === 2"
            />
            <span class="txt">No</span></label
          >
          <label for="yes"
            ><input
              type="radio"
              id="yes"
              value="1"
              v-model="chooseVal"
              class="chooseRadio"
              :disabled="typeIndex === 2"
            />
            <span class="txt">Yes</span></label
          >
        </div>
      </div>
      <div class="prescriptionOption_ODOS" v-show="chooseVal === '1'">
        <table class="ODOSTable">
          <thead>
            <tr>
              <th class="ODOSTable_th"></th>
              <th class="ODOSTable_th">Prism Horizontal</th>
              <th class="ODOSTable_th">Base Direction</th>
              <th class="ODOSTable_th">Prism Vertical</th>
              <th class="ODOSTable_th">Base Direction</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td class="pr40 title">OD-Right</td>
              <td class="pr40">
                <div class="select">
                  <select
                    name=""
                    id=""
                    v-model="prismOption.prismRight"
                    class="ODOSTable_select pr30 pl10"
                  >
                    <option class="option" value="0.00">0.00</option>
                    <option class="option" value="1.00">1.00</option>
                    <option class="option" value="2.00">2.00</option>
                    <option class="option" value="3.00">3.00</option>
                  </select>
                </div>
              </td>
              <td class="pr40">
                <div class="select">
                  <select
                    name=""
                    id=""
                    v-model="prismOption.baseRight"
                    class="ODOSTable_select pr30 pl10"
                  >
                    <option class="option" value="0.00">0.00</option>
                    <option class="option" value="1.00">1.00</option>
                    <option class="option" value="2.00">2.00</option>
                    <option class="option" value="3.00">3.00</option>
                  </select>
                </div>
              </td>
              <td class="pr40">
                <div class="select">
                  <select
                    name=""
                    id=""
                    v-model="prismOption.verticalRight"
                    class="ODOSTable_select pr30 pl10"
                  >
                    <option class="option" value="0.00">0.00</option>
                    <option class="option" value="1.00">1.00</option>
                    <option class="option" value="2.00">2.00</option>
                    <option class="option" value="3.00">3.00</option>
                  </select>
                </div>
              </td>
              <td>
                <div class="select">
                  <select
                    name=""
                    id=""
                    v-model="prismOption.directionRight"
                    class="ODOSTable_select pr30 pl10"
                  >
                    <option class="option" value="0.00">0.00</option>
                    <option class="option" value="1.00">1.00</option>
                    <option class="option" value="2.00">2.00</option>
                    <option class="option" value="3.00">3.00</option>
                  </select>
                </div>
              </td>
            </tr>
            <tr>
              <td class="pr40 title">OS-Left</td>
              <td class="pr40">
                <div class="select">
                  <select
                    name=""
                    id=""
                    v-model="prismOption.prismLeft"
                    class="ODOSTable_select pr30 pl10"
                  >
                    <option class="option" value="0.00">0.00</option>
                    <option class="option" value="1.00">1.00</option>
                    <option class="option" value="2.00">2.00</option>
                    <option class="option" value="3.00">3.00</option>
                  </select>
                </div>
              </td>
              <td class="pr40">
                <div class="select">
                  <select
                    v-model="prismOption.baseLeft"
                    class="ODOSTable_select pr30 pl10"
                  >
                    <option class="option" value="0.00">0.00</option>
                    <option class="option" value="1.00">1.00</option>
                    <option class="option" value="2.00">2.00</option>
                    <option class="option" value="3.00">3.00</option>
                  </select>
                </div>
              </td>
              <td class="pr40">
                <div class="select">
                  <select
                    name=""
                    id=""
                    v-model="prismOption.verticalLeft"
                    class="ODOSTable_select pr30 pl10"
                  >
                    <option class="option" value="0.00">0.00</option>
                    <option class="option" value="1.00">1.00</option>
                    <option class="option" value="2.00">2.00</option>
                    <option class="option" value="3.00">3.00</option>
                  </select>
                </div>
              </td>
              <td>
                <div class="select">
                  <select
                    name=""
                    id=""
                    v-model="prismOption.directionLeft"
                    class="ODOSTable_select pr30 pl10"
                  >
                    <option class="option" value="0.00">0.00</option>
                    <option class="option" value="1.00">1.00</option>
                    <option class="option" value="2.00">2.00</option>
                    <option class="option" value="3.00">3.00</option>
                  </select>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    </div>
    <div class="upload ptb10 plr10" v-else>
      <div class="mtb10 mlr10 upload_area ptb10 plr10"
      :class="{dragStatus: dragStatus}"
      @dragover="handleOver($event)"
      @dragenter="handleEnter($event)"
      @dragleave="handleLeave($event)"
      @drop="handleDragenter($event)"
      >
          <template v-if="!isUpload">
            <div class="upload_area_txt">Drag & drop files here or click to select files</div>
            <input type="file" class="upload_area_click" @change="add_img($event)">
          </template>
          <template v-else>
            <div class="upload_area_img">
              <img class="img" :src="imgOption.imgFile" alt="">
              <div class="name mtb20">{{imgOption.imgName}}</div>
              <div class="btn">
                <div class="btn_delete ptb10 plr20 mr10" @click.stop="handleRemove()">
                  <i class="el-icon-delete"></i>
                </div>
                <div class="btn_zoom ptb10 plr20" @click.stop="handlePictureCardPreview()">
                  <i class="el-icon-zoom-in"></i>
                </div>
              </div>
            </div>
          </template>
          
      </div>
    </div>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
  </div>
</template>

<script>
import { Regexs, chkFormat} from '@/utils/validate'
export default {
  data() {
    return {
      odosConfig: {
        sphereRight: "0.00",
        cylinderRight: "0.00",
        axisRight: "0.00",
        nvAddRight: "0.00",
        sphereLeft: "0.00",
        cylinderLeft: "0.00",
        axisLeft: "0.00",
        nvAddLeft: "0.00",
      },
      prismOption: {
        prismRight: "0.00",
        prismLeft: "0.00",
        baseRight: "0.00",
        baseLeft: "0.00",
        verticalLeft: "0.00",
        verticalRight: "0.00",
        directionLeft: "0.00",
        directionRight: "0.00",
      },
      pdOption: {
        single: "",
        dualRight: "",
        dualLeft: "",
      },
      chooseVal: "0",
      pd: "1",
      isSwitch: '1',
      dialogImageUrl: '', // 放大显示的图片链接
      dialogVisible: false, // 是否放大显示
      isUpload: false, // 图片是否上传
      dragStatus: false, // 拖拽的状态
      lastEnterEle: null, // 是否离开
      imgOption: {
        imgFile: require('@/assets/image/chooseLenses_img_1.jpg')
        ,imgName: ''
        ,type: ['png', 'jpg', 'jpeg']
      }
    };
  },
  props: {
    typeIndex: {
        type: Number,
        default: 0
    }
  },
  methods: {
     // 点击上传
      add_img (event) {
        this.handleDragenter(event, event.target.files);
      },
      // 删除图片
      handleRemove() {
        this.isUpload = false;
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = this.imgOption.imgFile;
        this.dialogVisible = true;
      },
      // 拖拽执行上传
      handleDragenter(e, files='') {
        e.preventDefault();
        if (files === '') var files = e.dataTransfer.files;
        let isSure = chkFormat(files[0].type, 'typeFile');
        if (files && files.length) {
          if(isSure) {
            let fileItem = {
              'file': files[0],
              'cover': ''
            }
            let reader = new FileReader();
            let self = this;
            this.$set(this.imgOption, 'imgName', files[0].name);
            reader.readAsDataURL(files[0]);
            reader.onload = function () {
                fileItem.cover = this.result;
                self.$set(self.imgOption, 'imgFile', fileItem.cover);
            }
            this.isUpload = true;
            this.dragStatus = false;
          } else {
            this.$message({
              message: '请上传图片后缀为.jpg、.png、.jpeg',
              type: 'warning'
            });
            this.dragStatus = false;
          }
        }
      },
      // 拖拽移动进入
      handleEnter(e) {
        e.preventDefault();
        this.lastEnterEle = e.target;
        this.dragStatus = true;
      },
      // 拖拽移动离开
      handleLeave(e) {
        e.preventDefault();
        if (this.lastEnterEle === e.target) {
          this.dragStatus = false;
        }
      },
      handleOver(e) {
        e.preventDefault();
        console.log('over :>> ');
      }
  },
};
</script>

<style lang="scss" scoped>
@import "~/assets/scss/index.scss";
.prescriptionOption {
  background: $bgc-title;
  &_ul {
    @include flex();
    border: 1px solid $ddd;
  }
  &_li {
    width: 50%;
    @include ellipsis();
    text-align: center;
    font-size: 15px;
    font-weight: bold;
    padding: 15px 0;
    cursor: pointer;
    background: $bgc-title;
  }
  .active {
    background: $cfff;
    &:hover {
      background: $ddd;
    }
  }
  &_PDP,
  &_ODOS {
    text-align: center;
    .ODOSTable {
      margin: 0 auto;
      border-collapse: separate;
      border-spacing: 0 20px;
      &_th {
        width: 130px;
        font-size: 13px;
        font-weight: bold;
        box-sizing: border-box;
      }
      .select {
        position: relative;
        &::before {
          content: "";
          width: 1px;
          height: 100%;
          background: $ddd;
          position: absolute;
          right: 30px;
          top: 0;
          z-index: 1;
          box-sizing: border-box;
        }
        &::after {
          content: " ";
          border-top: 5px solid #8d8280;
          border-left: 5px solid transparent;
          border-right: 5px solid transparent;
          position: absolute;
          right: calc(15px - 4px);
          top: 15px;
          z-index: 1;
        }
      }
      &_select {
        appearance: none;
        -moz-appearance: none;
        -webkit-appearance: none;
        width: 130px;
        height: 35px;
        border: 1px solid $ddd;
        background: $cfff;
        font-size: 13px;
        font-weight: bold;
        box-sizing: border-box;
        text-align: center;
        text-align-last: center;
      }

      .title {
        text-align: right;
        font-size: 13px;
        font-weight: bold;
      }
    }
  }
  &_PDP {
    border-top: 1px solid $ddd;
    border-bottom: 1px solid $ddd;
    .ODOSTable {
      margin: 0 auto;
      border-collapse: separate;
      border-spacing: 0 10px;
      td {
        width: 130px;
      }
      .firstTitle {
        width: 260px;
        font-size: 13px;
        font-weight: bold;
      }
      .label {
        @include flex();
        align-items: center;
        &_pd {
          width: 15px;
          height: 15px;
        }
      }
    }
  }
  &_Pv {
    .chooseTable {
      width: 770px;
      margin: 0 auto;
      border-collapse: separate;
      border-spacing: 0 10px;
      .title {
        font-size: 13px;
        font-weight: bold;
      }
      .choose_y_n {
        @include flex();
      }
    }
  }
  .txt {
    margin-left: 5px;
    font-size: 13px;
    font-weight: bold;
  }
  .option {
      padding-right: 10px;
      font-size: 14px;
      color: $c666;
  }
  .upload_area {
    @include flex();
    border: 1px dashed $ddd;
    height: 250px;
    position: relative;
  }
  .upload_area_click {
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    opacity:0;
  }
  .upload_area_txt {
    @include flex-center(center);
    width: $s100;
    height: $s100;
    font-size: 24px;
    color: $c999;
  }
  .upload_area_img {
    border: 1px solid #ddd;
    width: 20%;
    padding: 10px;
    box-sizing: border-box;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position:relative;
    z-index:9;
    box-shadow: 0 0 10px 0 rgba(3,3,3,.2);
    .img {
      width: $s100;
      height: 100px;
    }
    .name {
      @include multiline-ellipsis(3);
      text-align:center;
      flex-grow: 1;
      line-height: 1.2;
      color: $c666;
      font-size: 14px;
    }
    .btn {
      @include flex();
      justify-content: flex-end;
      .btn_delete,
      .btn_zoom { 
        font-size: 14px;
        color: $c333;
        border: 1px solid $ddd;
        border-radius: 5px;
        cursor: pointer;
        background: $cfff;
      }
      .btn_delete:hover,
      .btn_zoom:hover {
        color: $c333;
        border-color: $ddd;
        background-color: $ceb;
      }

    }
  }
  .dragStatus {
    border: 2px dashed $c000 !important;
    background: $ddd !important;
  }
}
</style>